<template>
  <div class="test-menu-page">
    <h1>菜单测试页面</h1>
    <div class="menu-info">
      <h2>菜单数据信息</h2>
      <pre>{{ menuData }}</pre>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { useUserStore } from "@/store";

const userStore = useUserStore();

const menuData = computed(() => {
  return JSON.stringify(userStore.menus, null, 2);
});
</script>

<style scoped>
.test-menu-page {
  padding: 20px;
}

.menu-info {
  margin-top: 20px;
}

pre {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}
</style>
